<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SimpleNote - 加密笔记应用</title>
    <meta name="description" content="跨平台的加密笔记应用，支持多账户、数据加密和Git同步">
    <meta name="theme-color" content="#2563eb">
    
    <!-- PWA 配置 -->
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png">
    <link rel="apple-touch-icon" href="icons/icon-192.png">
    
    <!-- 样式文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 加载界面 -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <h2>SimpleNote</h2>
            <p>正在加载...</p>
        </div>
    </div>

    <!-- 登录界面 -->
    <div id="login-screen" class="login-screen" style="display: none;">
        <!-- 顶部Logo区域 -->
        <div class="login-top">
            <h1 class="login-logo">SimpleNote</h1>
            <p class="login-subtitle">跨平台加密笔记应用</p>
        </div>
        
        <div class="login-container">
            
            <div class="login-form">
                <div class="platform-selector">
                    <div class="platform-options">
                        <label class="platform-option">
                            <input type="radio" name="platform" value="gitee" checked>
                            <div class="platform-card">
                                <img src="icons/gitee.svg" alt="Gitee" class="platform-icon">
                                <span>Gitee</span>
                            </div>
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="access-token">访问令牌</label>
                    <input type="password" id="access-token" placeholder="请输入您的访问令牌" required>
                    <div class="help-text">
                        <p>如何获取访问令牌：</p>
                        <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: var(--space-2) 0;">开启 <strong>projects</strong> 权限：查看、创建、更新你的项目</p>
                        <ul>
                            <li><strong>Gitee:</strong> 设置 → 私人令牌 → 生成新令牌</li>
                        </ul>
                    </div>
                </div>
                
                <div class="login-actions">
                    <button id="login-btn" class="btn btn-primary">登录</button>
                    <button id="refresh-cache-btn" class="btn btn-sm btn-secondary" title="强制刷新缓存">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="23 4 23 10 17 10"></polyline>
                            <polyline points="1 20 1 14 7 14"></polyline>
                            <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                        </svg>
                        刷新缓存
                    </button>
                    <button id="install-pwa-login-btn" class="btn btn-sm btn-primary" title="安装应用到设备">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="7,10 12,15 17,10"></polyline>
                            <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                        安装应用
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主应用界面 -->
    <div id="main-app" class="main-app" style="display: none;">
        <!-- 顶部工具栏 -->
        <header class="app-header">
            <div class="header-left">
                <button id="menu-btn" class="btn btn-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                    </svg>
                </button>
                <h1 class="app-title">
                    <span class="app-title-full">SimpleNote</span>
                    <span class="app-title-short">SN</span>
                </h1>
            </div>
            
            <div class="header-center">
                <div class="current-account">
                    <span id="current-account-name">未选择账户</span>
                </div>
            </div>
            
            <div class="header-right">
                <button id="account-switcher-btn" class="btn btn-secondary">切换</button>
                <button id="sync-btn" class="btn btn-icon" title="同步">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="23 4 23 10 17 10"></polyline>
                        <polyline points="1 20 1 14 7 14"></polyline>
                        <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                    </svg>
                </button>
                <button id="settings-btn" class="btn btn-icon" title="设置">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="3"></circle>
                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                    </svg>
                </button>
            </div>
        </header>

        <!-- 主内容区域 -->
        <div class="app-content">
            <!-- 移动端侧边栏遮罩层 -->
            <div class="sidebar-overlay" id="sidebar-overlay"></div>
            
            <!-- 侧边栏 -->
            <aside id="sidebar" class="sidebar">
                <div class="sidebar-header">
                    <button id="new-note-btn" class="btn btn-primary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        新建笔记
                    </button>
                </div>
                
                <div class="sidebar-content">
                    <div class="search-box">
                        <input type="text" id="search-input" placeholder="搜索笔记...">
                    </div>
                    
                    <div class="note-list" id="note-list">
                        <!-- 笔记列表将在这里动态生成 -->
                    </div>
                </div>
            </aside>

            <!-- 主编辑区 -->
            <main class="main-content">
                <div class="editor-container">
                    <div class="editor-header">
                        <input type="text" id="note-title" placeholder="笔记标题" class="note-title-input">
                        <div class="editor-actions">
                            <button id="save-note-btn" class="btn btn-sm btn-primary">保存</button>
                            <button id="delete-note-btn" class="btn btn-sm btn-danger">删除</button>
                        </div>
                    </div>
                    
                    <div class="editor-content">
                        <textarea id="note-content" placeholder="开始写作..." class="note-content-textarea"></textarea>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 账户切换器 -->
    <div id="account-switcher" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>选择账户</h3>
                <button id="close-switcher" class="btn btn-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="account-list" id="account-list">
                    <!-- 账户列表将在这里动态生成 -->
                </div>
                
                <div class="modal-actions">
                    <button id="add-account-btn" class="btn btn-primary">添加新账户</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加账户模态框 -->
    <div id="add-account-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加账户</h3>
                <button id="close-add-account" class="btn btn-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="add-account-form">
                    <div class="form-group">
                        <label for="account-name">账户名称</label>
                        <input type="text" id="account-name" placeholder="例如：个人账户、工作账户" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="git-username">Git 用户名</label>
                        <input type="text" id="git-username" placeholder="Git 用户名" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="git-repo">仓库名</label>
                        <input type="text" id="git-repo" placeholder="仓库名称" value="simplenote-data" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="git-token">访问令牌</label>
                        <input type="password" id="git-token" placeholder="Git 访问令牌" required>
                        <div class="help-text">
                            <p>如何获取访问令牌：</p>
                            <ul>
                                <li><strong>GitHub:</strong> Settings → Developer settings → Personal access tokens</li>
                                <li><strong>Gitee:</strong> 设置 → 私人令牌 → 生成新令牌</li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="modal-actions">
                <button type="button" id="save-account" class="btn btn-primary">保存账户</button>
                <button type="button" id="cancel-add-account" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 确认弹窗 -->
    <div id="confirm-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="confirm-title">确认操作</h3>
                <button id="close-confirm" class="btn btn-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            
            <div class="modal-body">
                <p id="confirm-message">确定要执行此操作吗？</p>
            </div>
            
            <div class="modal-actions">
                <button id="confirm-ok" class="btn btn-danger">确认</button>
                <button id="confirm-cancel" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 设置界面 -->
    <div id="settings-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>设置</h3>
                <button id="close-settings" class="btn btn-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="settings-tabs">
                    <button class="tab-btn active" data-tab="accounts">账户管理</button>
                    <button class="tab-btn" data-tab="sync">同步设置</button>
                    <button class="tab-btn" data-tab="appearance">外观设置</button>
                </div>
                
                <div class="settings-content">
                    <div id="accounts-tab" class="tab-content active">
                        <h4>账户管理</h4>
                        <div class="account-management" id="account-management">
                            <!-- 账户管理内容将在这里动态生成 -->
                        </div>
                    </div>
                    
                    <div id="sync-tab" class="tab-content">
                        <h4>同步设置</h4>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="auto-sync" checked>
                                自动同步
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="sync-interval">同步间隔（分钟）</label>
                            <input type="number" id="sync-interval" value="5" min="1" max="60">
                        </div>
                        <div class="form-group">
                            <h5>缓存管理</h5>
                            <div style="display: flex; gap: var(--space-3); flex-wrap: wrap;">
                                <button id="settings-refresh-cache-btn" class="btn btn-secondary" title="清理应用缓存">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <polyline points="23 4 23 10 17 10"></polyline>
                                        <polyline points="1 20 1 14 7 14"></polyline>
                                        <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                                    </svg>
                                    清理缓存
                                </button>
                                <button id="install-pwa-settings-btn" class="btn btn-primary" title="安装应用到设备">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                        <polyline points="7,10 12,15 17,10"></polyline>
                                        <line x1="12" y1="15" x2="12" y2="3"></line>
                                    </svg>
                                    安装应用
                                </button>
                            </div>
                            <div class="help-text">
                                <p>清理应用缓存可以解决显示异常或性能问题，配置信息将被保留。</p>
                                <p id="install-help-text" style="display: none; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-top: var(--space-2);">点击"安装到手机"可以将应用添加到主屏幕，像原生应用一样使用。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div id="appearance-tab" class="tab-content">
                        <h4>外观设置</h4>
                        <div class="form-group">
                            <label for="font-size">字体大小</label>
                            <input type="range" id="font-size" min="12" max="24" value="16">
                            <span id="font-size-value">16px</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notifications" class="notifications"></div>

    <!-- 脚本文件 -->
    <script src="app.js"></script>
    
    <!-- PWA 安装提示 -->
    <script>
        // PWA 安装提示
        let deferredPrompt;
        
        window.addEventListener('beforeinstallprompt', (e) => {
            console.log('PWA 安装提示已准备就绪');
            // 阻止默认的安装提示
            e.preventDefault();
            // 保存事件，以便稍后触发
            deferredPrompt = e;
            
            // 显示自定义安装按钮
            showInstallButton();
        });
        
        function showInstallButton() {
            // 检查是否已经安装
            if (window.matchMedia('(display-mode: standalone)').matches) {
                return; // 已经安装，不显示按钮
            }
            
            // 显示登录页面的安装按钮
            const loginInstallBtn = document.getElementById('install-pwa-login-btn');
            if (loginInstallBtn) {
                loginInstallBtn.style.display = 'inline-flex';
            }
            
            // 显示设置中的安装按钮
            showSettingsInstallButton();
            
            // 创建浮动安装按钮（移动端延迟显示）
            if (isMobile()) {
                setTimeout(() => {
                    createFloatingInstallButton();
                }, 3000);
            } else {
                createFloatingInstallButton();
            }
        }
        
        // 创建浮动安装按钮
        function createFloatingInstallButton() {
            // 检查是否已经安装
            if (window.matchMedia('(display-mode: standalone)').matches) {
                return; // 已经安装，不显示按钮
            }
            
            // 创建安装按钮
            const installBtn = document.createElement('button');
            installBtn.id = 'install-pwa-btn';
            installBtn.className = 'btn btn-secondary';
            installBtn.innerHTML = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7,10 12,15 17,10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                安装应用
            `;
            installBtn.style.cssText = `
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1000;
                background: var(--glass);
                backdrop-filter: blur(20px);
                border: 1px solid var(--glass-border);
                color: white;
                padding: 12px 16px;
                border-radius: 12px;
                font-size: 14px;
                font-weight: 500;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
            `;
            
            installBtn.addEventListener('click', async () => {
                if (deferredPrompt) {
                    // 显示安装提示
                    deferredPrompt.prompt();
                    // 等待用户响应
                    const { outcome } = await deferredPrompt.userChoice;
                    console.log(`用户选择: ${outcome}`);
                    // 清除保存的事件
                    deferredPrompt = null;
                    // 隐藏安装按钮
                    installBtn.remove();
                }
            });
            
            installBtn.addEventListener('mouseenter', () => {
                installBtn.style.transform = 'translateY(-2px)';
                installBtn.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.4)';
            });
            
            installBtn.addEventListener('mouseleave', () => {
                installBtn.style.transform = 'translateY(0)';
                installBtn.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
            });
            
            // 添加到页面
            document.body.appendChild(installBtn);
            
            // 5秒后自动隐藏
            setTimeout(() => {
                if (installBtn && installBtn.parentNode) {
                    installBtn.style.opacity = '0';
                    installBtn.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        if (installBtn && installBtn.parentNode) {
                            installBtn.remove();
                        }
                    }, 300);
                }
            }, 5000);
        }
        
        // 监听应用安装完成
        window.addEventListener('appinstalled', () => {
            console.log('PWA 已安装');
            // 隐藏浮动安装按钮
            const installBtn = document.getElementById('install-pwa-btn');
            if (installBtn) {
                installBtn.remove();
            }
            // 隐藏登录页面安装按钮
            const loginInstallBtn = document.getElementById('install-pwa-login-btn');
            if (loginInstallBtn) {
                loginInstallBtn.style.display = 'none';
            }
            // 隐藏设置中的安装按钮
            hideSettingsInstallButton();
        });
        
        // 检测是否在移动端
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }
        
        // 移动端特殊处理
        if (isMobile()) {
            // 在移动端，延迟显示安装提示
            setTimeout(() => {
                if (deferredPrompt) {
                    showInstallButton();
                }
            }, 3000);
        }
        
        // 设置中的安装按钮
        function setupSettingsInstallButton() {
            const settingsInstallBtn = document.getElementById('install-pwa-settings-btn');
            const installHelpText = document.getElementById('install-help-text');
            console.log('设置页面安装按钮:', settingsInstallBtn);
            
            if (settingsInstallBtn && installHelpText) {
                console.log('设置页面安装按钮存在，添加事件监听器');
                settingsInstallBtn.addEventListener('click', async (event) => {
                    console.log('设置页面安装按钮被点击了！');
                    // 阻止默认行为
                    event.preventDefault();
                    event.stopPropagation();
                    
                    if (deferredPrompt) {
                        try {
                            // 显示安装提示
                            deferredPrompt.prompt();
                            // 等待用户响应
                            const { outcome } = await deferredPrompt.userChoice;
                            console.log(`PWA安装结果: ${outcome}`);
                            // 清除保存的事件
                            deferredPrompt = null;
                            // 隐藏安装按钮
                            settingsInstallBtn.style.display = 'none';
                            installHelpText.style.display = 'none';
                        } catch (error) {
                            console.error('PWA安装过程中出错:', error);
                        }
                    } else {
                        // 如果没有deferredPrompt，显示安装说明
                        if (isMobile()) {
                            // 手机端安装说明
                            alert('手机端安装方法：\n\n' +
                                  'Android Chrome:\n' +
                                  '1. 点击浏览器菜单（三个点）\n' +
                                  '2. 选择"添加到主屏幕"\n' +
                                  '3. 点击"添加"\n\n' +
                                  'iPhone Safari:\n' +
                                  '1. 点击分享按钮（方框+箭头）\n' +
                                  '2. 选择"添加到主屏幕"\n' +
                                  '3. 点击"添加"');
                        } else {
                            // PC端安装说明
                            alert('PC端安装方法：\n\n' +
                                  'Chrome/Edge: 点击地址栏右侧的安装图标\n' +
                                  'Firefox: 点击地址栏右侧的菜单，选择"安装"');
                        }
                    }
                });
            }
        }
        
        // 显示设置中的安装按钮
        function showSettingsInstallButton() {
            const settingsInstallBtn = document.getElementById('install-pwa-settings-btn');
            const installHelpText = document.getElementById('install-help-text');
            
            if (settingsInstallBtn && installHelpText) {
                settingsInstallBtn.style.display = 'inline-flex';
                installHelpText.style.display = 'block';
            }
        }
        
        // 隐藏设置中的安装按钮
        function hideSettingsInstallButton() {
            const settingsInstallBtn = document.getElementById('install-pwa-settings-btn');
            const installHelpText = document.getElementById('install-help-text');
            
            if (settingsInstallBtn && installHelpText) {
                settingsInstallBtn.style.display = 'none';
                installHelpText.style.display = 'none';
            }
        }
        
        // 设置登录页面安装按钮
        function setupLoginInstallButton() {
            const loginInstallBtn = document.getElementById('install-pwa-login-btn');
            console.log('设置登录页面安装按钮:', loginInstallBtn);
            
            if (loginInstallBtn) {
                console.log('登录页面安装按钮存在，添加事件监听器');
                loginInstallBtn.addEventListener('click', async (event) => {
                    console.log('登录页面安装按钮被点击了！');
                    // 阻止默认行为
                    event.preventDefault();
                    event.stopPropagation();
                    
                    if (deferredPrompt) {
                        try {
                            // 显示安装提示
                            deferredPrompt.prompt();
                            // 等待用户响应
                            const { outcome } = await deferredPrompt.userChoice;
                            console.log(`PWA安装结果: ${outcome}`);
                            // 清除保存的事件
                            deferredPrompt = null;
                            // 隐藏所有安装按钮
                            loginInstallBtn.style.display = 'none';
                            hideSettingsInstallButton();
                            const floatingBtn = document.getElementById('install-pwa-btn');
                            if (floatingBtn) {
                                floatingBtn.remove();
                            }
                        } catch (error) {
                            console.error('PWA安装过程中出错:', error);
                        }
                    } else {
                        // 如果没有deferredPrompt，显示安装说明
                        if (isMobile()) {
                            // 手机端安装说明
                            alert('手机端安装方法：\n\n' +
                                  'Android Chrome:\n' +
                                  '1. 点击浏览器菜单（三个点）\n' +
                                  '2. 选择"添加到主屏幕"\n' +
                                  '3. 点击"添加"\n\n' +
                                  'iPhone Safari:\n' +
                                  '1. 点击分享按钮（方框+箭头）\n' +
                                  '2. 选择"添加到主屏幕"\n' +
                                  '3. 点击"添加"');
                        } else {
                            // PC端安装说明
                            alert('PC端安装方法：\n\n' +
                                  'Chrome/Edge: 点击地址栏右侧的安装图标\n' +
                                  'Firefox: 点击地址栏右侧的菜单，选择"安装"');
                        }
                    }
                });
            }
        }
        
        // 检查PWA安装状态
        function checkPWAInstallStatus() {
            const isInstalled = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
            
            if (isInstalled) {
                hideSettingsInstallButton();
                // 隐藏登录页面的安装按钮
                const loginInstallBtn = document.getElementById('install-pwa-login-btn');
                if (loginInstallBtn) {
                    loginInstallBtn.style.display = 'none';
                }
            } else {
                // 即使没有deferredPrompt也显示安装按钮，让用户知道可以安装
                showSettingsInstallButton();
                // 显示登录页面的安装按钮
                const loginInstallBtn = document.getElementById('install-pwa-login-btn');
                if (loginInstallBtn) {
                    loginInstallBtn.style.display = 'inline-flex';
                }
            }
        }
        
        
        // 添加全局点击事件监听器用于调试
        document.addEventListener('click', (event) => {
            const target = event.target;
            if (target && (target.id === 'install-pwa-settings-btn' || target.id === 'install-pwa-login-btn')) {
                console.log('全局点击事件捕获到安装按钮点击:', target.id);
                console.log('目标元素:', target);
                console.log('事件对象:', event);
            }
        });
        
        // 初始化所有安装按钮
        setupSettingsInstallButton();
        setupLoginInstallButton();
        
        // 页面加载完成后检查PWA状态
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(checkPWAInstallStatus, 1000);
        });
        
    </script>
</body>
</html>
